<template>
  <div>
     <div :id="id" :style="{ width: '200px', height: '200px'}"></div>
  </div>
</template>
<script>
import echarts from 'echarts'
export default {
  props: {
    id: {
      type: String,
      default: () => ''
    },
    data: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    data: {
      handler(newValue) {
        this.drawLine(newValue)
      },
      immediate: false,
    },
  },
  // mounted () {
  //   console.log(this.data, 'kdkdkkd')
  //   this.drawLine(this.data)
  // },
  methods: {
    drawLine (data) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById(this.id))
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        series: [{
          name: '访问来源',
          type: 'pie',
          radius: ['50%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '14',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: data
        }]
      })
    }
  }
}
</script>
